<!DOCTYPE html>
<html>
	<head>
		<title>City Monopoly</title>
		<link rel="stylesheet" href="css/style.css" type="text/css">
		<link rel="stylesheet" href="css/map_styles.css" type="text/css">
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
		<script type="text/javascript" src="scripts/gameMap.js" ></script>
		<script type="text/javascript" src="/_ah/channel/jsapi"></script>
		<script src="http://connect.facebook.net/en_US/all.js"></script>		
	</head>
	<body>
		<section id="header_container">
			<div id="Facebook_btn"><fb:login-button autologoutlink="true"></fb:login-button></div>
			<div id="header_title">Currently the game only supports Chrome and Safari browsers.</div>
		</section>
		<div id="loading_container"> 
			<div id="loading_text">Welcome to Monopoly City!</div>
			<div id="pageProgressBar"><div id="pageProgressBar_img"></div></div>
		</div>
		<section id="content_container">
			<div id="profile_container">
				<div id="img_profile"></div>
				<div id="txt_profile">
					<span>Name:</span>
					<span id="profile_name">David Huang</span>
					<span>Gender:</span>
					<span id="profile_gender">Male</span>
					<span>Money:</span>
					<span id="profile_money">XXXXX</span>
				</div>
			</div>
			<div id="diceview">
				<a id="cube_btn" href="#">
					<div id="cube">
						<div class="face one"><br/><br/>o</div>
						<div class="face two"><br/><br/>o o</div>
						<div class="face three"><br/><br/>o o o</div>
						<div class="face four"><br/><br/>o o<br/>o o</div>
						<div class="face five"><br/>o o<br/>o<br/>o o</div>
						<div class="face six"><br/>o o<br/>o o<br/>o o</div>
					</div>
				</a>
				<div id="bubble_dice"><strong>CLICK TO ROLL DICE!</strong></div>
			</div>
			<div id="console">
				<div id="console_text"></div>
				<input type="text" id="message_box">
				<button id="message_sendBtn" value="Send" onClick="sendMessage();">Send</button>
			</div>
			<div id="userlist_container">
				<div>Users Online:</div>
				<div id="userlist"></div>
			</div>
			<div id="chat_container"></div>
			<div id="popup_container">
				<div id="popup_bg"></div>	
				<div id="popup_popup">
					<h3 id="popup_header"></h3>
					<p id="popup_text"></p>
				</div>
			</div>			
			<div id="map">
				<div id="character">
					<div id="char_image"></div>
					<a id="arrow_down_btn" href='#'></a>
					<a id="arrow_right_btn" href='#'></a>
					<a id="arrow_up_btn" href='#'></a>
					<a id="arrow_left_btn" href='#'></a>
					<a id="land_down_btn" href='#'></a>
					<a id="land_right_btn" href='#'></a>
					<a id="land_up_btn" href='#'></a>
					<a id="land_left_btn" href='#'></a>
					<a id="bubble_yes_btn" href='#'>Buy</a>
					<a id="bubble_no_btn" href='#'>Ignore</a>
					<a id="bubble_upgrade_btn" href='#'>Upgrade</a>
					<a id="bubble_noupgrade_btn" href='#'>Ignore</a>
					<a id="bubble_pay_btn" href='#'>Pay</a>
					<a id="bubble_nopay_btn" href='#'>Buy</a>
				</div>
				<div id="character_other"></div>
			</div>
		</section>
		<section id="interface">
			<p></p>
		</section>
	
		<!--  Scripts -->
		<div id="fb-root"></div>
		<script type="text/javascript" src ="scripts/global.js"></script>
		<script type="text/javascript" src ="scripts/transactions.js"></script>
		<script type="text/javascript" src ="scripts/helperFunctions.js"></script>
		<script type="text/javascript" src ="scripts/channel.js"></script>	
		<script type="text/javascript" src ="scripts/fb.js"></script>
	</body>
</html>